/*
 * @Author: yanjikun
 * @Date: 2022-03-23 11:05:20
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-03-23 11:29:31
 * @Description: file content
 */

import { isNumber } from '@/utils/is'
import { computed, Ref, unref } from 'vue'
import { BasicProps } from '../props'
import { FormConfig } from '../types/form'

export const useItemLabelWidth = (configRef: Ref<FormConfig>, formPropsRef: Ref<BasicProps>) => {
  return computed(() => {
    const configItem = unref(configRef)
    const { labelCol = {}, wrapperCol = {} } = configItem.formItemProps ?? {}
    const { labelWidth } = configItem
    const {
      labelCol: globalLabelCol,
      wrapperCol: globalWrapperCol,
      labelWidth: globalLabelWidth
    } = unref(formPropsRef)
    let width = labelWidth ?? globalLabelWidth
    const col = { ...globalLabelCol, ...labelCol }
    const wrapCol = { ...globalWrapperCol, ...wrapperCol }
    if (width) {
      width = isNumber(width) ? `${width}px` : width
    }
    return {
      labelCol: { style: { width }, ...col },
      wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol }
    }
  })
}
